<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的联系</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./vue.min.js"></script>
</head>
<body>
    
    <div class="container" id="content">
        <!-- model.lazy的用法 -->
        <div class="panel panel-default" >
              <div class="panel-heading">
                    <h3 class="panel-title">v-model使用</h3>
              </div>
              <div class="panel-body">

                <div class="form-group">
                    <label for="">v-model输入值</label>
                    <input type="text" class="form-control" v-model.lazy="modelData" placeholder="Input field">
                </div>
                <div class="form-group">
                    <label for="">v-model输出值</label>
                    <p class="form-control">{{modelData}}</p>
                </div>
                  
              </div>
        </div>
              <!-- modle.number的用法 -->
              <div class="panel panel-default" >
                <div class="panel-heading">
                      <h3 class="panel-title">v-model.number使用</h3>
                </div>
                <div class="panel-body">
  
                  <div class="form-group">
                      <label for="">v-model.number输入值</label>
                      <input type="text" class="form-control" v-model.number="numberData" placeholder="Input field">
                  </div>
                  <div class="form-group">
                      <label for="">v-model.number输出值</label>
                      <p class="form-control">{{numberData}}</p>
                  </div>
                    
                </div>
        </div>
                <!-- modle.trim的用法 -->
              <div class="panel panel-default" >
                <div class="panel-heading">
                      <h3 class="panel-title">v-model.trim 使用</h3>
                </div>
                <div class="panel-body">
  
                  <div class="form-group">
                      <label for="">v-model.trim 输入值</label>
                      <input type="text" class="form-control" v-model.number="trimDate" placeholder="Input field">
                  </div>
                  <div class="form-group">
                      <label for="">v-model.trim 输出值</label>
                      <p class="form-control">{{trimDate}}</p>
                  </div>
                    
                </div>
            </div>


                <!-- v-text 指令的用法 -->
              <div class="panel panel-default" >
                <div class="panel-heading">
                      <h3 class="panel-title">v-text 指令的使用</h3>
                </div>
                <div class="panel-body">
  
                  <div class="form-group">
                      <label for="">v-text 输入值</label>
                      <input type="text" class="form-control" v-model="textData" placeholder="Input field">
                  </div>
                  <div class="form-group">
                      <label for="">v-text 模板输出值</label>
                      <p class="form-control">{{textData}}</p>
                  </div>
                  <div class="form-group">
                    <label for="">v-text 指令输出值</label>
                    <p class="form-control" v-text="textData"></p>
                </div>
              </div>
            </div> 

             <!-- v-html 指令的用法 -->
             <div class="panel panel-default" >
                <div class="panel-heading">
                      <h3 class="panel-title">v-html 指令的使用</h3>
                </div>
                <div class="panel-body">
  
                  <div class="form-group">
                      <label for="">v-html 输入值</label>
                      <input type="text" class="form-control" v-model="htmlData" placeholder="Input field">
                  </div>
                  <div class="form-group">
                    <label for="">v-html 指令输出值</label>
                    <p class="form-control" v-html="htmlData"></p>
                </div>
              </div>
            </div> 

            <!-- v-show 指令的用法 -->
            <div class="panel panel-default" >
                <div class="panel-heading">
                      <h3 class="panel-title">v-show 指令的使用</h3>
                </div>
                <div class="panel-body">
  
                  <div class="form-group">
                      <label for="">v-show 输入值</label>
                      <input type="text" class="form-control" v-model="showData" placeholder="Input field">
                  </div>
                  <div class="form-group">
                    <label for="">v-show 指令输出值</label>
                    <p class="form-control" v-show="showData < 30">我随时有空</p>
                    <p class="form-control" v-show="showData >= 30 && showData < 70">有时间叫我，我看看情况</p>
                    <p class="form-control" v-show="showData >= 70">不好意思最近很忙</p>
                </div>
              </div>
            </div> 

            <!-- v-if 指令的用法 -->
            <div class="panel panel-default" >
                <div class="panel-heading">
                      <h3 class="panel-title">v-if 指令的使用</h3>
                </div>
                <div class="panel-body">
  
                  <div class="form-group">
                      <label for="">v-if 输入值</label>
                      <input type="text" class="form-control" v-model="showData" placeholder="Input field">
                  </div>
                  <div class="form-group">
                    <label for="">v-if 指令输出值</label>
                    <p class="form-control" v-if="showData < 30">我随时有空</p>
                    <p class="form-control" v-if="showData >= 30 && showData < 70">有时间叫我，我看看情况</p>
                    <p class="form-control" v-if="showData >= 70">不好意思最近很忙</p>
                </div>
              </div>
            </div> 

            <!-- v-bind 指令的用法v-bind:绑定类型="绑定内容" 简写方法"："-->
            <div class="panel panel-default" >
              <div class="panel-heading">
                    <h3 class="panel-title">v-bind 指令的使用</h3>
              </div>
              <div class="panel-body">

                <div clas s="form-group">
                    <label for="">v-bind 输入值</label>
                    <input type="text" class="form-control" v-model="bindData" placeholder="Input field">
                </div>
                <div class="form-group">
                  <label for="">v-bind 指令输出值</label>.
                  <div class="form-control " :bindtext="bindData">
                    <p :class="['label',{'label-info' : bindData < 35,'label-warning' : bindData >= 35 && bindData < 75,'label-danger' : bindData >= 75}]">我随时有空</p>
                    <p :class="['label',bindData < 35 ? 'label-info' : bindData >= 75 ? 'label-danger' : 'label-warning']" :style="{'fontSize' : '18px','color' : '#666'}">看我脸色行事</p>
                  </div>
              </div>
            </div>
          </div> 

           <!-- v-for 指令的用法v-for="(item,index) in 数据" ，必须带key，且不可重复-->
           <div class="panel panel-default" >
            <div class="panel-heading">
                  <h3 class="panel-title">v-for 指令的使用</h3>
            </div>
            <div class="panel-body">

              <div class="form-group">
                <label for="">v-for 指令输出值</label>.
                <div class="form-control ">

                  <p v-for="(item , index) in forData" :key="`fordata-${index}`" :class="['label' , item.cls]">{{ item.name }}</p>
                </div>
            </div>
          </div>
        </div> 

        <!-- v-on 指令的用法  通过v-on:事件名="事件函数/触发内容"来添加，简写方法"@事件名="事件函数/触发内容""-->
        <div class="panel panel-default" >
          <div class="panel-heading">
                <h3 class="panel-title">v-on 指令的使用</h3>
          </div>
          <div class="panel-body">

            <div class="form-group">
              <label for="">v-on 指令输出值</label>.
              <div class="form-control ">
                <p class="label label-info" v-on:click = "testEvent($event,'click')" style="cursor: pointer;" v-model="onData">下次请你吃饭~</p>
              </div>
              <div clas s="form-group">
                <label for="">v-on 指令输出值</label>
                <input type="text" class="form-control" v-model="onData" placeholder="Input field" 
                @blur="console.log('****你到底想说啥？')"
                @input = "console.log('****嗯嗯嗯，我在听呢……')"
                >
              </div>
          </div>
        </div>
      </div> 

    </div>
    <script>
        new Vue ({
            el : '#content',
            //data是固定方法，没有其他形式
            data () { 
                return {
                    modelData : '',
                    numberData : '',
                    trimDate : '',
                    textData : '',
                    htmlData : '<span style="color : red;fontSize : 20px">来啊，快活呀~</span>',
                    showData : '',
                    bindData : '',
                    forData : [
                      {name : '第一',id : '1', cls : 'label label-info'},
                      {name : '第二',id : '2', cls : 'label label-warning'},
                      {name : '第三',id : '3', cls : 'label label-info'},
                      {name : '第四',id : '4', cls : 'label label-danger'},
                      {name : '第五',id : '5', cls : 'label label-info'},
                    ],
                    onData : '520',
                }
            },
           //method固定的接收对象，都是Vue规定好的
            methods : {
               //测试方式
              testEvent (evt , type) {
                console.log('======你在想屁吃！'+this.bindData)
                console.log(arguments)
                console.log(evt , type)
              }
            }
        })
    </script>
</body>
</html>